<template>
	<view class="comment">
		<view class="total">共{{ num }}条评论</view>
		<view class="box">
			<view class="wrap" v-for="item in list" :key="item">
				<view class="father flex-all">
					<image v-if="item.user.avatar" :src="IMG_URL + item.user.avatar" class="avatar"
						style="border-radius:50%;"  />
					<image v-else class="imgicon" src="/static/imgs/tou.png" mode="widthFix" />
					<view class="flex-box">
						<view class="name">{{ item.user.username }}</view>
						<view class="speech"><text>{{ item.contents }}</text><text
								class="time">{{ formatTimeAgo(item.createtime) }}</text><text class="replyBtn">回复</text>
						</view>
					</view>
					<view class="loves">
						<image v-if="item.is_like == 1" class="xinicon" src="/static/imgs/xin1.png" mode="widthFix"
							@click="cancelLikeRemarkOne(item)" />
						<image v-else class="xinicon" src="/static/imgs/xin.png" mode="widthFix"
							@click="likeRemarkOne(item)" />

					</view>
				</view>
				<Reply :parent_id="item.id" :article_id="item.article_id" :username="item.username"></Reply>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment';
	import {
		IMG_URL,
	} from "../../config/app.js";
import {
	remarkList,
	likeRemark,
	cancelLikeRemark
} from '../../api/hall.js'
import env from '@/utlis/env.js';
import Reply from '@/components/hall/reply'
export default {
	components: {
		Reply
	},
	name: "hallComment", //评论
	props: {
		article_id: {
			type: Number,
			required: true,
		},
	},
	data() {
		return {
			list: {},
			num: 0,
			IMG_URL: IMG_URL,
		};
	},
	mounted() {
		this.remark()
	},
	methods: {
		formattedLikeNum(likeNum) {
			if (likeNum >= 10000) {
				// 大于等于1万小于100万，显示 x.x 万
				return (likeNum / 10000).toFixed(1) + 'w';
			} else {
				// 其他情况直接显示数字
				return likeNum;
			}
		},
		//获取评论列表
		async remark() {
			const res = await remarkList({
				'article_id': this.article_id,
			}).then(res => {
				console.log(res, '评论列表');
				this.num = res.data.num
				this.list = res.data.data
			});
		},
		formatTimeAgo(createtime) {
		    const currentTime = moment();
		    const articleTime = moment.unix(createtime);
		
		    const timeDifference = currentTime.diff(articleTime, 'seconds');
		    const minutes = Math.floor(timeDifference / 60);
		    const hours = Math.floor(timeDifference / 3600);
		    const days = Math.floor(timeDifference / (3600 * 24));
		    const weeks = Math.floor(timeDifference / (3600 * 24 * 7));
		
		    if (weeks >= 1) {
		        return articleTime.format('YYYY-MM-DD HH:mm');
		    } else if (days >= 2) {
		        return `${days}天前`;
		    } else if (days === 1) {
		        return '昨天';
		    } else if (hours >= 1) {
		        return `${hours}小时前`;
		    } else if (minutes >= 1) {
		        return `${minutes}分钟前`;
		    } else {
		        return '刚刚';
		    }
		},
		//点赞评论
		async likeRemarkOne(item) {
			const res = await likeRemark({
				'remark_id': item.id
			}).then(res => {
				console.log(res, '点赞评论');
				if (res.code == 1) {
					const foundItem = this.list.find(listItem => listItem.id === item.id);
					if (foundItem) {
						foundItem.is_like = 1;
					}
				}
			});
		},
		//取消点赞评论
		async cancelLikeRemarkOne(item) {
			const res = await cancelLikeRemark({
				'remark_id': item.id
			}).then(res => {
				console.log(res, '取消点赞评论');
				if (res.code == 1) {
					const foundItem = this.list.find(listItem => listItem.id === item.id);
					if (foundItem) {
						foundItem.is_like = 0;
					}
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
	.avatar {
		width: 110rpx;
		//flex-shrink: 0;
		height: 110rpx;
	}
.comment {
	padding: 30rpx 0 calc(var(--status-bar-height) + 140rpx);

	.total {
		font-size: 26rpx;
		color: #888888;
	}

	.box {
		.wrap {
			padding: 30rpx 0;

			&:last-child {
				.replys_box {
					border-bottom: 0 !important;
				}
			}

			.father {
				align-items: flex-start;

				.imgicon {
					width: 72rpx;
					flex-shrink: 0;
				}

				.flex-box {
					padding: 0 40rpx 0 20rpx;

					.name {
						font-size: 26rpx;
						color: #888888;
						line-height: 38rpx;
					}

					.speech {
						margin-top: 15rpx;
						color: #464646;
						font-size: 26rpx;
						line-height: 42rpx;

						.time {
							display: inline-block;
							margin: 0 20rpx;
							color: #888;
							font-size: 24rpx;
							line-height: 42rpx;
							word-wrap: break-word;
						}

						.replyBtn {
							display: inline-block;
							font-size: 24rpx;
							line-height: 42rpx;
							color: #464646;
							word-wrap: break-word;
						}
					}
				}

				.loves {
					display: flex;

					.xinicon {
						width: 32rpx;
					}
				}
			}

			.replys {
				padding: 0 30rpx 0 90rpx;

				.replys_box {
					padding: 30rpx 0;
					border-bottom: 1px solid #EEE;
					align-items: flex-start;

					.imgicon {
						width: 46rpx;
						flex-shrink: 0;
					}

					.flex-box {
						padding-left: 14rpx;

						.name {
							font-size: 26rpx;
							color: #888888;
							line-height: 38rpx;
						}

						.speech {
							font-size: 26rpx;
							color: #252525;
							line-height: 42rpx;
							margin: 16rpx 0;

							.spName {
								display: inline-block;
								font-size: 26rpx;
								color: #888888;
								line-height: 38rpx;
								margin-left: 4rpx;
							}
						}

						.time {
							.time_ago {
								display: inline-block;
								color: #888;
								font-size: 24rpx;
								line-height: 42rpx;
							}

							.replyBtn {
								display: inline-block;
								font-size: 24rpx;
								color: #464646;
								line-height: 42rpx;
								margin-left: 20rpx;
							}
						}
					}
				}
			}
		}
	}
}

.txts {
	font-size: 26rpx;
	color: $uni-text-color-primary;
	margin-left: 10rpx;
}
</style>